<template>
  <div>
    <h3 class="title">七天天气预报</h3>
    <div class="mes">
      <div class="message">
        <div class="box" v-for="(item, index) in weekArray" :key="index">
          {{ item }}
        </div>
      </div>
      <div class="message">
        <div class="box" v-for="(item, index) in getNextSevenWeekdays" :key="index">
          {{ item }}
        </div>
      </div>
      <div class="message">
        <div class="box" v-for="(item, index) in weatherStore?.weatherdata" :key="index">
          <i :class="'qi-' + item.iconDay" style="font-size: 30px;color: #FFBC42;"></i>
        </div>
      </div>
      <div class="message">
        <div class="box" v-for="(item, index) in weatherStore?.weatherdata" :key="index">
          {{ item.textDay }}
        </div>
      </div>
    </div>
    <!-- 盒子将来echarts展示图形图标的节点 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import * as echarts from 'echarts'
import { useWeatherStore } from '@/stores/weather'
const weatherStore = useWeatherStore()

let weekdays: string[] = [] // 用于存储接下来7天的星期几
const weekArray = computed(() => {
  return weatherStore?.weatherdata?.map((data) => data.fxDate.slice(5))
})
const maxtempArray = computed(() => {
  return weatherStore?.weatherdata?.map((data) => data.tempMax)
})
const mintempArray = computed(() => {
  return weatherStore?.weatherdata?.map((data) => data.tempMin)
})
const getNextSevenWeekdays = computed(() => {
  // 星期几的数字到文本的映射
  const weekdaysText: string[] = [
    '星期日',
    '星期一',
    '星期二',
    '星期三',
    '星期四',
    '星期五',
    '星期六'
  ]
  const date = new Date() // 获取当前日期

  // 设置日期为今天的星期几
  date.setDate(date.getDate() - date.getDay() + new Date().getDay())

  // 循环添加接下来7天的星期几
  for (let i = 0; i < 7; i++) {
    weekdays.push(weekdaysText[date.getDay()])
    // 设置日期为下一天
    date.setDate(date.getDate() + 1)
  }
  weekdays[0] = '今天'
  weekdays[1] = '明天'
  return weekdays
})

onMounted(() => {
  setTimeout(function () {
    initmap()
  }, 1000)
})

watch(
  maxtempArray,
  () => {
    initmap()
  },
  {
    deep: true
  }
)
//获取节点
let charts = ref()
const initmap = () => {
  //获取echarts类的实例
  let mycharts = echarts.init(charts.value)
  mycharts.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {},
    toolbox: {
      show: true,
      right: 0,
      top: 20,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: getNextSevenWeekdays.value
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} °C'
      }
    },
    series: [
      {
        name: '最高温',
        type: 'line',
        data: maxtempArray.value,
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
      {
        name: '最低温',
        type: 'line',
        data: mintempArray.value,
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [
            { type: 'average', name: 'Avg' },
            [
              {
                symbol: 'none',
                x: '90%',
                yAxis: 'max'
              },
              {
                symbol: 'circle',
                label: {
                  position: 'start',
                  formatter: 'Max'
                },
                type: 'max',
                name: '最高点'
              },
             
              
            ]
          ]
        }
      }
    ]
  })
}
</script>

<style scoped>
.mes{
  width: 100%;
}
.title {
  font-weight: bold;
  font-size: 18px;
}
.message {
  margin-top: 8px;
  display: flex;
  /* justify-content: space-around; */
  align-items: center;
  color: #c5c6b6;
  .box{
    width: 14.2%;
    text-align: center;
  }
}
.charts {
  margin-top: 10px;
  width: 100%;
  height: 380px;
}
</style>
